<!DOCTYPE html>
<html lang="en" data-theme="custom">
  <head>
    <title>Themepro</title>    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/themepro/index.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/red.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/blue.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/dark.css" />      
    <link rel="stylesheet" type="text/css" href="/themepro/vanilla-picker.csp.css" />          
    <script src="/themepro/index.umd.js"></script>
    <script src="https://unpkg.com/vanilla-picker@2"></script>
    <style> 
        .theme{
            padding:0.5em 1em;
            background:white;
            border:1px solid #333;
            cursor: pointer;
            color:gray;
        }
    </style> 
  </head>
  <body >
    
     

    <div style="margin:1rem;padding:0.5rem;background:var(--t-theme-bgcolor);text-align:center"> 
    var(--t-theme-bgcolor)
        <div style="margin:1rem;padding:0.5rem;background:var(--t-theme-bgcolor-1);text-align:center"> 
            var(--t-theme-bgcolor-1)
            <div style="margin:1rem;padding:0.5rem;background:var(--t-theme-bgcolor-2);text-align:center"> 
                var(--t-theme-bgcolor-2)
                <div style="margin:1rem;padding:0.5rem;background:var(--t-theme-bgcolor-3);text-align:center"> 
                    var(--t-theme-bgcolor-3)
                    <div style="margin:1rem;padding:0.5rem;background:var(--t-theme-bgcolor-4);text-align:center"> 
                    var(--t-theme-bgcolor-4)
                        <div id="themes" style="1em;display:flex;align-items:center;justify-content: center;gap:0.5em;justify-content:center;">                        
                            <div id="colorpicker"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>        
    <script>    
        ThemePro.create({
            name:"custom",
            theme:"#2d8ee4ff"
        })
        var colorPicker = new Picker({
            parent:  document.getElementById("colorpicker"),
            popup:false,
            color:'#2d8ee4ff',
            onChange: function(color) {
                ThemePro.create({
                    name:"custom",
                    theme:color.hex
                })
            }
        })
    </script>
  </body>
</html>

